<template>
	<view class="page">
		<view class="box clist-style" v-for="item in products" @click="goudeils(item.wineId)">
			<image style="height: 100%;width: 100%;border-radius: inherit;" :src="item.imageUrl" mode="scaleToFill"></image>
			<view class="po-wen">
				<text>酒精含量{{item.alcoholContent}}% </text>
				<text>{{item.volumeMl}}毫升</text>
				<view style="font-size: 1rem;font-weight: 600;margin-top: 0.5rem;">{{item.wname}}</view>
				<view style="font-size: 1rem;font-weight: 600;margin-top: 0.5rem;">
					{{item.price}}$
				</view>
			</view>
			<view style="position: absolute;bottom:10px;right:32px;">
				<view class="bl-icon">
					<u-icon name="arrow-right" color="rgb(247 244 244)" size="28"></u-icon>
				</view>
			</view>
		</view>
		<u-empty v-if="products.length==0" mode="list" icon="http://cdn.uviewui.com/uview/empty/address.png">
		</u-empty>
<u-back-top top="400" icon="arrow-up" :right="backTopData.right" :customStyle="backTopData.customStyle"
			:bottom="backTopData.bottom" :icon="backTopData.icon" :mode="backTopData.mode"
			:iconStyle="backTopData.iconStyle" :duration="backTopData.duration" :scrollTop="scrollTop"
			@click="backToTop()"></u-back-top>
		<tab-bar :current='1'></tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				products: [],
				pageNo: 1, // 当前页数
				pageSize: 10, // 每页加载数量
				loadingMore: false, // 是否正在加载更多数据
				categoryId: null,
				name: "",
				username: "",
				totalPage: 1, // 总页数
				scrollTop:0,
				backTopData: {
					mode: 'circle',
					icon: 'arrow-upward',
					bottom: 100,
					customStyle: {
						backgroundColor: '#cecece',
					},
					iconStyle: {
						color: "#ffffff",
					},
					right: 20,
					duration: 300
				},
			}
		},
		created() {
			this.getWinactive()
		},
		onPageScroll(e) {
			this.scrollTop=e.scrollTop
		},
		onReachBottom(){
			this.loadMore()
		},
		methods: {
			async loadMore(){
				if (this.pageNo < this.totalPage) {
					this.pageNo++
					await this.getWinactive();
				}
			},
			backToTop() {
				// 设置 scrollTop 为 0，页面会滚动到顶部
				this.scrollTop = 0;
			},
			checkToken() {
				// 从 Vuex 中获取用户信息
				const token = uni.getStorageSync('token')

				// 检查用户信息中是否包含 token
				if (!token) {
					// 如果 token 不存在或为空，则显示登录提示
					uni.showModal({
						title: '提示',
						content: '请登录后再进行操作',
						confirmText: '去登录',
						success: (res) => {
							if (res.confirm) {
								// 用户点击了确认按钮，跳转至登录页面
								this.goToLogin();
							}
						},
					});
					return false;
				}
				return true;

			},
			handleClick(action, index) {

				// 检查用户是否已登录
				if (!this.checkToken()) {
					// 如果用户未登录，则不执行后续操作
					return;
				}

				// 如果已登录，则根据不同的操作执行相应的操作
				switch (action) {
					case 'goudeils':
						this.goudeils(index);
						break;
					default:
						break;
				}
			},
			// 用户点击某个控件事件处理
			goToLogin() {
				uni.navigateTo({
					url: '/pages/login/index', // 前往登录页的路径，请根据实际情况修改
				});
			},
			goudeils(wineId) {
				uni.navigateTo({
					url: `/pages/tabBar/yuyue/details/details?wineId=${wineId}`
				})
			},
			async getWinactive() {
				this.loadingMore = true;
				const param = {
					size: this.pageSize,
					current: this.pageNo
				}
				if (this.searchKeyword) {
					param.searchKeyword = this.searchKeyword;
				}

				// 如果 categoryId 不为空，添加到参数中
				if (this.categoryId) {
					param.categoryId = this.categoryId;
				}
				const res = await this.$request.get('/system/wine/list', param)
				console.log(res);

				if (res.code == 200) {
					if (this.pageNo === 1) {
						this.products = res.data.list.records;
					} else {
						this.products = this.products.concat(res.data.list.records);
					}


			

					// 加载完成，重置 loadingMore 状态
					this.loadingMore = false;
				}


			},
		}
	}
</script>

<style scoped lang="scss">
	.clist-style {
		height: 9rem;
		width: 90vw;
		margin-top: 1.6rem;
		border-radius: 0.5rem;
		position: relative;

		.po-wen {
			position: absolute;
			top: 25px;
			font-size: 0.8rem;
			color: #ffffff;
			left: 32px;
			width: 9rem;
		}
	}

	.bl-icon {
		border-radius: 50%;
		background-color: #f9f7f775;
		padding: 0.1rem;
	}
</style>